<template lang="pug">
.cp-product-basic
  el-card.card(v-loading="cardLoading")
    .card-header(slot="header")
      span.text {{ currentNode ? currentNode.label : null }}
      span.btns
        el-tooltip(content="新建节点")
          i.icon-act.el-icon-tickets(@click="createDir")
        el-tooltip(content="新建查询")
          i.icon-act.el-icon-document(@click="createQuery")
        el-tooltip(content="查看查询")
          i.icon-act.el-icon-plus(@click="viewQuery")
        el-tooltip(content="编辑查询")
          i.icon-act.el-icon-edit(@click="editQuery")
        el-tooltip(content="删除节点")
          i.icon-act.el-icon-delete(@click="deleteDir")
    .card-body
      el-tree.tree-wrap(:data="tree", node-key="id", default-expand-all, :expand-on-click-node="false", @node-click="nodeClick", :props="limitProps")
        .custom-tree(slot-scope="{ node, data }")
          p(:class="{ active: currentNode && currentNode.id === data.id }") {{ data.label }}
  el-dialog(:title="tdTitle", width="20%", :visible.sync="tdVisible")
    el-input(v-model="tdNodeName", placeholder="请输入分类名称")
    .dialog-footer(slot="footer")
      el-button(@click="treeCancel") 取消
      el-button(type="primary", @click="treeSave") 保存
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'productlist',
  props: {
    tree: Array
  },
  data() {
    return {
      limitProps: {
        children: 'children',
        label: 'label'
      },
      cardLoading: false,
      currentNode: null,
      focusNode: {},
      // dialog block
      tdTitle: '',
      tdEdit: false,
      tdVisible: false,
      tdNodeName: ''
    };
  },
  methods: {
    // 新增
    createDir() {
      if (this.currentNode) {
        this.tdEdit = false;
        this.tdTitle = '新建分类';
        this.tdVisible = true;
        this.tdNodeName = null;
      } else {
        this.$message.info('请先选择节点');
      }
    },
    // 编辑
    // editDir() {
    //   if (this.currentNode) {
    //     this.tdEdit = true;
    //     this.tdTitle = '编辑分类';
    //     this.tdVisible = true;
    //     this.tdNodeName = this.currentNode.label;
    //   } else {
    //     this.$message.info('请先选择节点');
    //   }
    // },
    // 删除
    deleteDir() {
      if (this.currentNode) {
        this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.removeNode(this.focusNode, this.currentNode);
        }).catch(() => {
          this.$message({ type: 'info', message: '已取消删除' });
        });
      } else {
        this.$message.info('请先选择节点');
      }
    },
    // 添加节点
    addNode(data, label) {
      let id = '';
      const len = data.children && data.children.length;
      if (len) {
        const last = data.children[len - 1].id;
        const arr = last.split('-');
        const prev = arr[arr.length - 1];
        id = `${data.id}-${Number(prev) + 1}`;
      } else {
        id = `${data.id}-1`;
      }
      const newChild = { id, label, children: [] };
      if (!data.children) {
        this.$set(data, 'children', []);
      }
      data.children.push(newChild);
    },
    // 删除节点
    removeNode(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
      this.currentNode = null;
    },
    // 节点点击
    nodeClick(data, node) {
      this.currentNode = data;
      this.focusNode = node;
      if (data.id.split('-').length > 2) {
        this.$emit('change-list', data.id);
      }
    },
    createQuery () {
      this.$emit('create-query');
    },
    viewQuery () {
      this.$emit('view-query');
    },
    editQuery () {
      this.$emit('edit-query');
    },
    // 取消编辑
    treeCancel() {
      this.tdVisible = false;
    },
    // 保存编辑
    treeSave() {
      this.cardLoading = true;
      setTimeout(() => {
        if (this.tdEdit) {
          this.currentNode.label = this.tdNodeName;
        } else {
          this.addNode(this.currentNode, this.tdNodeName);
        }
        this.cardLoading = false;
        this.tdVisible = false;
        this.$message({ message: '保存成功', type: 'success' });
      }, 500);
    },
  },
  computed: {
    ...mapGetters([])
  },
  mounted () {
  }
};
</script>

<style lang="sass">
@import "../../../styles/utils"
.cp-product-basic
  height: 100%
  .card
    position: relative
    min-height: 100%
  .el-card
    box-shadow: none
  .el-card__header
    position: relative
    min-height: 47px
    padding: 12px 20px
    background-color: #F2F2F2
  .card-header
    .text
      font-size: 16px
    .btns
      position: absolute
      right: 16px
      top: 50%
      transform: translateY(-50%)
      .icon-act
        font-size: 18px
  .el-tree
    height: 100%
    overflow-x: hidden
    overflow-y: auto
  .el-tree-node__content
    height: 36px
  .el-tree-node:focus>.el-tree-node__content, .el-tree-node__content:hover
    background-color: transparent
  .custom-tree
    flex: 1
    display: flex
    align-items: center
    justify-content: space-between
    font-size: 14px
    padding-right: 8px
    height: 32px
    line-height: 32px
    .el-input
      max-width: 150px
    .icon-act
      font-size: 16px
      font-weight: 500
      cursor: pointer
      margin-left: 3px
      margin-right: 3px
      &:hover
        color: #5D9BFB
    .ml
      margin-left: 14px
    .active
      color: #5D9BFB
</style>
